<template>
  <div>
    <el-dialog
      v-model="open"
      width="65%"
      :close-on-click-modal="false"
      :title="title"
    >
      <div>
        <el-row class="mb8" :gutter="10">
          <el-col :span="1.5">
            <el-button
              style="margin-right"
              size="small"
              type="primary"
              @click="handleAdd"
            >
              新增
            </el-button>
          </el-col>
          <el-col :span="1.5">
            <el-button size="small" type="primary" @click="submit">保存</el-button>
          </el-col>
          <!-- <el-col :span="3">
          <el-button @click="handleDel" size="small" type="primary">删除</el-button>
        </el-col> -->
        </el-row>
        <el-form ref="formRef" :model="form">
          <el-table
            ref="payTable"
            :data="form.tableList"
            border
            height="500px"
            show-summary
            :summary-method="data => getSummaries(data)"
            @selection-change="handleSelectChange"
          >
            <el-table-column type="selection" width="120"></el-table-column>

            <el-table-column label="服务商" align="center" width="155">
              <template #default="{ row, $index }">
                <el-form-item :prop="`tableList.${$index}.serviceChannelCode`" :rules="[{ required: true, message: '请选择服务商', trigger: ['blur', 'change'] }]">
                  <el-input
                    v-model="row.serviceChannelCode"
                    width="120"
                    size="small"
                  >
                  </el-input>
                  <!-- <agent-select
                    v-model="row.serviceChannelCode"
                    width="120"
                    size="small"
                    :agent-list="agentList"
                  ></agent-select> -->
                </el-form-item>
              </template>
            </el-table-column>

            <el-table-column
              label="提单号"
              prop="ladingNo"
              align="center"
              width="120"
            >
              <template #default="{ row }">
                <el-form-item>
                  <el-input v-model.trim="row.ladingNo" disabled size="small"></el-input>
                </el-form-item>
              </template>
            </el-table-column>

            <el-table-column
              label="费用名称"
              prop="feeName"
              align="center"
              width="140"
            >
              <template #default="{ row, $index }">
                <el-form-item :prop="`tableList.${$index}.feeName`" :rules="[{ required: true, message: '请选择费用名称', trigger: ['blur', 'change'] }]">
                  <el-select
                    v-model="row.feeName"
                    filterable
                    clearable
                    :disabled="rowDisable(row)"
                  >
                    <el-option
                      v-for="dict in dicts[DictDirection.费用名称]"
                      :key="dict.feeValue"
                      :label="dict.feeName"
                      :value="dict.feeValue"
                    ></el-option>
                  </el-select>
                </el-form-item>
              </template>
            </el-table-column>
            <el-table-column
              label="单价"
              prop="unitPrice"
              align="center"
              width="140px"
            >
              <template #default="{ row, $index }">
                <el-form-item :prop="`tableList.${$index}.unitPrice`" :rules="[{ required: true, message: '请输入金额', trigger: ['blur', 'change'] }]">
                  <el-input-number v-model="row.unitPrice" size="small" :disabled="rowDisable(row)"></el-input-number>
                </el-form-item>
              </template>
            </el-table-column>
            <el-table-column
              label="数量"
              prop="number"
              align="center"
              width="140px"
            >
              <template #default="{ row, $index }">
                <el-form-item :prop="`tableList.${$index}.number`" :rules="[{ required: true, message: '请输入金额', trigger: ['blur', 'change'] }]">
                  <el-input-number
                    v-model="row.number"
                    :min="0"
                    size="small"
                    :disabled="rowDisable(row)"
                  ></el-input-number>
                </el-form-item>
              </template>
            </el-table-column>
            <el-table-column
              label="金额"
              prop="amount"
              align="center"
              width="120px"
            >
              <template #default="{ row,$index }">
                <el-form-item :prop="`tableList.${$index}.number`" :rules="[{ required: true, message: '请输入金额', trigger: ['blur', 'change'] }]"> 
                  <el-input v-model="row.amount" size="small">{{ `tableList.${$index}.number` }}</el-input> 
                  <el-input v-model="row.amount" size="small"></el-input>
                </el-form-item>
              </template>
            </el-table-column>
            <el-table-column
              label="币种"
              prop="currency"
              align="center"
              width="120"
            >
              <template #default="{ row }">
                <el-form-item>
                  <el-select v-model="row.currency" :disabled="rowDisable(row)">
                    <el-option
                      v-for="item in currencyList"
                      :key="item.id"
                      :label="item.value"
                      :value="item.value"
                    ></el-option>
                  </el-select>
                </el-form-item>
              </template>
            </el-table-column>
            <el-table-column
              label="汇率"
              prop="exchangeRate"
              align="center"
              width="80px"
            >
              <template #default="{ row }">
                <el-form-item>
                  <el-input v-model="row.exchangeRate" size="small"></el-input>
                </el-form-item>
              </template>
            </el-table-column>
            <el-table-column
              label="备注"
              prop="remark"
              align="center"
              type="textarea"
              width="120"
            >
              <template #default="{ row }">
                <el-form-item>
                  <el-input v-model="row.remark" show-overflow-tooltip size="small"></el-input>
                </el-form-item>
              </template>
            </el-table-column>
            
            <el-table-column
              label="操作"
              fixed="right"
              align="center"
              width="100"
            >
              <template #default="{ row, $index }">
                <el-button
                  v-hasPermi="['system:payableFeeAirTransport:remove']"
                  text
                 
                  @click="handleDel(row, $index)"
                >
                  删除
                </el-button>
              </template>
            </el-table-column>
          </el-table>
        </el-form>
      </div>
    </el-dialog>
  </div>
</template>
<script lang="ts" setup>
import { ref, getCurrentInstance } from 'vue'
import { ElButton, ElMessage } from 'element-plus'
import useDicts, { DictDirection } from '@/store/modules/dicts'

let ids = [],
  // 非单个禁用
  single = ref(true),
  // 非多个禁用
  multiple = ref(true)
const dicts = useDicts()
dicts.setDicts(DictDirection.费用名称)
const currencyList = ref([
  { value: '人民币', id: 0 },
  { value: '美元', id: 1 },
])
const open = ref(false)
const title = ref(null)
const form = ref({
  tableList: [{ serviceChannelCode: '', ladingNo: '', feeName: '', unitPrice: '', number: '', amount: '', currency: '', exchangeRate: '', remark: '' }],
})

const rowDisable = (row: { [key: string]: any }) => {
  const res = row.auditStatus && row.auditStatus !== '待确认'
  return res
}
// 新增
const handleAdd = () => {}
const submit = () => {}
const handleDel = () => {
  
}
const getSummaries = (param) => {
  const { columns } = param
  let RMB = 0
  let Dollar = 0
  form.value.tableList
  .filter(ele => ele.currency === '人民币')
  .forEach(item => {
    RMB = item.amount + RMB
  })
  form.value.tableList
  .filter(c => c.currency === '美元')
  .forEach(r => {
    Dollar = r.amount + Dollar
  })
  const sums = []
  const text1 = ' 人民币总计：'
  const price1 = '￥ {RMB.toFixed(2)}'
  const text2 = '美元总计：'
  const price2 = '$ {Dollar.toFixed(2)}'
  columns.forEach((column, index) => {
    if (index === 0) {
      sums[index] = (() => {
        const el = text1
        return el
      })()
    } else if (index === 1) {
      sums[index] = (() => {
        const el = price1
        return el
      })()
    } else if (index === 2) {
      sums[index] = (() => {
        const el = text2
        return el
      })()
    } else if (index === 3) {
      sums[index] = (() => {
        const el = price2
        return el
      })()
    } else {
      console.log('error')
    }
  })
  return sums
}
const handleSelectChange = (row: { [key: string]: any }) => {
  // eslint-disable-next-line @typescript-eslint/no-unused-vars
  ids = row.map((item) => item.id)
  single.value = row.length != 1
  multiple.value = !row.length
}
defineExpose({
  open,

})
</script>